<template>
  <div class="InstructionalDesign percentage">
    <a-layout class="percentage">
      <a-layout>
        <a-layout-sider>
          <SubMenu :menuList="subMenuList"></SubMenu>
        </a-layout-sider>
        <a-layout-content class="percentage">
          <a-row :gutter="16" class="percentage conArea" style="height:calc( 100% - 30px)">
            <a-col class="gutter-row" :span="8" style="height:100%;">
              <InitiateContentArea ref="InitiateContentArea" class="conAreaItem percentage" style="width:100%;height:100%;"></InitiateContentArea>
            </a-col>
            <a-col class="gutter-row white_bg" :span="16" style="height:100%;">
              <Generated @changeInitpush="changeInitpush" class="conAreaItem percentage" style="width:100%;height:100%;"></Generated>
            </a-col>
          </a-row>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import { createNamespacedHelpers, mapState} from "vuex";
let { mapMutations, mapActions } = createNamespacedHelpers("adminBasic");

import Menu from '@/components/Menu.vue';
import SubMenu from '@/components/SubMenu.vue';
import InitiateContentArea from '@/components/InitiateContentArea.vue';
import Generated from '@/components/Generated.vue';
import Title from '@/components/Title.vue';



export default {
  name: 'InstructionalDesign',
  components: { Menu, SubMenu, InitiateContentArea, Generated, Title },
  data() {
    return {
      subMenuList: [],
    }
  },

  created() {
  },

  activated() {
    this.$refs.InitiateContentArea.scrollToBottom()
  },

  methods: {
    ...mapActions(["formGet","post"]),
    changeInitpush(e){
      this.$refs.InitiateContentArea.changeInitpush(e);
    },
    login() {
      let obj = {
        username: "aiedu@example.com",
        password: "aiedu2024",
      };
      const formData = new FormData();
      formData.append("username", obj.username);
      formData.append("password", obj.password);
      console.log(formData);

      this.$axios.post('/api/v1/login/access-token', formData).then(res => {
        let Authorization = `Bearer ${res.data.access_token}`

        localStorage.setItem('Authorization', Authorization);
      }).catch(err => {
        this.$message.error(err);
      })

    },

    routerPush(e) {
      this.$router.push(e);
    }
  }
}
</script>



<style lang="less">
.ant-layout-sider,
.ant-layout-header {
  background: #fff;
}
</style>
<style lang="less" scoped>
.percentage {

  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gutter-row {
  height: 100%;
}

.InstructionalDesign {
  width: 100%;
  height: 100%;
}

.conArea {
  padding: 0 10px;
  box-sizing: border-box;

  .conAreaItem {
    // background: #fff;
    border-radius: 8px;
    padding: 0 10px;
    box-sizing: border-box;
  }
}

.white_bg {
  background: #fff;
  margin-top: 10px;
  border-radius: 4px;
  box-shadow: 3px 3px 5px 0 rgba(24, 24, 24, 0.07);
}
</style>